<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>${lotter.name }</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style type="text/css">
			*{color: white;border: 0px solid white;}
			.desk div{border: 0px solid white;}
			button{width:80px;padding: 10px;color: blue;margin: 20px;font-weight: bold;font-size: 20px;}
			
			.desk,.xiazhu{width: 360px;height: 180px;}
			.desk{margin:0 auto;background: url("/img/caizhong/bjl/desk.png");background-size: 100% 100%;}
			
			.dipaiimg,.dipaiimg1,.fapaiimg,.huishou,.hs{width:45px; border-radius: 5px;}
			.dipaiimg,.dipaiimg1{position: absolute;left: 50%;top: 15px;}
			.fapaiimg,.huishou,.hs{-webkit-transition: all 1s ease-out;transform-style: preserve-3d;position: absolute;-webkit-transform:rotateY(0deg)}
			.dipai{padding: 15px;}
			.fapai{padding: 0 5px;} 
			.huishou{left: 60%;top: 15px;}
			
			.xiazhu{border: 1px solid white;margin:0 auto;border-radius: 20px;padding: 0;}
			.xiazhu div{font-size: 15px;font-weight: bold;padding: 0;height: 60px;padding-top: 8px;}
			.peilv{color: silver;font-size: 13px;}
			
			.d1,.d2,.d3,.d4,.d5,.d6{border-bottom: 1px solid white;}
			.d1,.d3,.d4,.d5,.d7,.d8{border-right: 1px solid white;}
		</style>
	</head>
	<body style="background: #003d38;">
		<div style="background-image: url('/img/caizhong/bjl/bjlbg.png');opacity:0.08;filter:alpha(opacity=8);width:100%;height:100%;z-index:-1;position: fixed;"></div>
		<div  class="hidden">
			<span id="id">${lotter.id }</span>
			<span id="cname">${lotter.cname }</span>
			<span class="lasttime">${lotter.lottertime }</span>
			<span class="name">${lotter.name }</span>
		
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4" style="padding: 10px 20px;position: fixed;top: 0;height: 50px;z-index: 10;background: url('/img/caizhong/bjl/bjltop.png') ;background-size:100% 50px;background-repeat:norepeat;">
			<div class="row">
				<div class="time" style="color: white;font-weight: bold;font-size: 20px;text-align: center;">10</div>
				<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="color: white;margin-top: -23px;"></a>
				<a onclick="help('${lotter.helpurl}','${lotter.name }')" style="color: white;margin-top: -25px;" class="fr">购彩助手</a>
			</div>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4" style="padding:0px;padding-bottom: 10px; margin-top: 70px;text-align: center;">
			<!-- 正文开始 -->
			<div style="text-align: center;">
				<div class="desk">
					<div class="dipai">
						<img alt="" class="dipaiimg1" src="/img/caizhong/puke/tao/bg.png"/>
						<img alt="" class="huishou" src="/img/caizhong/puke/tao/bg.png"/>
						<img class="dipaiimg" src="/img/caizhong/puke/tao/bg.png"/>
					</div>
				</div>
				<br>
				<div class="xiazhu">
			${timestamp }
					<div class="col-xs-6 d1">闲<br><span class="peilv">1：1</span></div>
					<div class="col-xs-6 d2">庄<br><span class="peilv">1：0.95</span></div>
					
					<div class="col-xs-3 d3">闲对<br><span class="peilv">1：11</span></div>
					<div class="col-xs-3 d4">完美对子<br><span class="peilv">1：20</span></div>
					<div class="col-xs-3 d5">任意对子<br><span class="peilv">1：5</span></div>
					<div class="col-xs-3 d6">庄对<br><span class="peilv">1：11</span></div>
					
					<div class="col-xs-4 d7">小<br><span class="peilv">1：1.5</span></div>
					<div class="col-xs-4 d8">和<br><span class="peilv">1：8</span></div>
					<div class="col-xs-4 d9">大<br><span class="peilv">1：0.54</span></div>
				</div>
			</div>
			<button onclick="fapai()">发牌</button>
			<button onclick="kaipai('.fapaiimg0','.fapaiimg3','meih10','hongtk')">开牌</button>
			<button onclick="shou1()">收牌</button>
			<button onclick="kaipai('.fapaiimg0','.fapaiimg3','meih10','hongta')">开1</button>
			<button onclick="kaipai('.fapaiimg7','.fapaiimg4','meih10','hongtk')">开2</button>
			<button onclick="kaipai('.fapaiimg12','.fapaiimg5','meih10','hongtk')">开3</button>
			<!-- 正文结束 -->
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4" style="padding: 10px 20px;position: fixed;bottom: 0;height: 60px;z-index: 10;background: url('/img/caizhong/bjl/bjlfoot.png') ;background-size:100% 60px;background-repeat:norepeat;">
		</div>
	</body>
	<script type="text/javascript">
		$(".dipaiimg,.dipaiimg1").css("left",(Number($(".dipaiimg").css("left").replace("px",""))-22.5)+"px");
		window.onresize = function(){
			$(".dipaiimg,.dipaiimg1").css("left",(Number($(".dipaiimg").css("left").replace("px",""))-22.5)+"px");
		}
		
		var i=0;
		function fapai(){
			if(i>416){
				location.reload();
			}
			var t=new Array("30","80","130","202","252","302");/* ,"80","130","202","252","302" */
			var timer=window.setInterval(function(){
				fap(i,t[i%6]);
				i++;
				if(i%t.length==0){
					clearInterval(timer);
				}
			},1000);
		}
		
		function fap(i,left){
			$(".dipaiimg").removeClass("dipaiimg").addClass("fapaiimg").addClass("fapaiimg"+i);
			$(".fapaiimg"+i).css({"left":left+"px","margin-top":"80px"}).attr("src","/img/caizhong/puke/tao/bg.png");
			window.setTimeout(function(){
				$(".dipai").append("<img class='dipaiimg' src='/img/caizhong/puke/tao/bg.png' />");
				$(".dipaiimg").css("left",(Number($(".dipaiimg").css("left").replace("px",""))-22.5)+"px");
			},800);
		}
		
		function kaipai(arr1,arr2,hs1,hs2){
			var timer1=window.setInterval(function(){
				$(arr1+","+arr2).css("-webkit-transform","rotateY(90deg)");
				window.setTimeout(function(){
					$(arr1).attr("src","/img/caizhong/puke/tao/"+hs1+".png").css("-webkit-transform","rotateY(0deg)");
					$(arr2).attr("src","/img/caizhong/puke/tao/"+hs2+".png").css("-webkit-transform","rotateY(0deg)");
				},1000);
			},1000);
		}
		
		function shou1(){
			$(".fapaiimg").attr("src","/img/caizhong/puke/tao/bg.png");
			$(".fapaiimg").attr("class","hs");
			$(".hs").css({"left":"60%","margin-top":"0"});
			window.setTimeout(function(){
				$(".hs").remove();
			},800);
		}
		var ttt=10;
		var jjj=0;
		alert(timestamp+" "+new Date().getTime())
		var time1=window.setInterval(function(){
			/* document.write(new Date().getTime()+"<br>"); */
			ttt--;
			$(".time").text(ttt);
			if(ttt==1&&jjj%3==0){
				fapai();
				ttt=21;//21
				jjj++;
			}
			if(ttt==1&&jjj%2==1){
				ttt=16;
				jjj++;
				kaipai('.fapaiimg'+(i-6),'.fapaiimg'+(i-3),'meih10','hongta')
			}
			if(ttt==14&&jjj%2==0){
				kaipai('.fapaiimg'+(i-5),'.fapaiimg'+(i-2),'meih10','hongta')
			}
			if(ttt==12&&jjj%2==0){
				kaipai('.fapaiimg'+(i-4),'.fapaiimg'+(i-1),'meih10','hongta')
			}
			
			if(ttt==1&&jjj%2==0){
				shou1();
				ttt=3;
				jjj=0;
			}
			
		},1000);
		
		
		$(function(){
			$(".div1").click(function(){
				var desk=$(this).attr("class").replace("div1 ","");
				window.location.href="xz.do?id="+$("#id").text()+"&cname="+$("#cname").text()+"&key="+desk;
			});
		});
		window.onload=function () {
			
		    document.addEventListener('touchstart',function (event) {
		        if(event.touches.length>1){
		            event.preventDefault();
		        }
		    })
		    var lastTouchEnd=0;
		    document.addEventListener('touchend',function (event) {
		        var now=(new Date()).getTime();
		        if(now-lastTouchEnd<=300){
		            event.preventDefault();
		        }
		        lastTouchEnd=now;
		    },false)
		}	
	</script>
</html>
